<template>
  <Modal
    v-model:active="scanning3D"
    transfer
    title="扫掠"
    hide-mask
    draggable
    :no-footer="true"
    @close="closeBtn"
    :width="500"
    :append-to-body="true"
  >
    <div class="title">
      <div class="title_color"></div>
      <div class="title_content">选择器</div>
    </div>
    <div class="chose-box">
      <RadioGroup
        vertical
        v-model:value="parameter.method"
        @change="onChangeMethod"
      >
        <Radio
          v-for="(item, index) in methodList"
          :key="item.label"
          :label="item.label"
        >
          <div class="radio_box">
            <div class="radio_item">{{ item.content }}</div>
            <div class="selector-buttons">
              <span
                @click="active = item.label"
                class="selector-button"
                :class="{ active: item.label === active }"
              >
                单元
              </span>
              <button class="icon-button" @click="handleClear">
                <img
                  src="../../assets/delete.svg"
                  alt=""
                  class="icon imgStyle"
                />
              </button>
            </div>
          </div>
        </Radio>
      </RadioGroup>
    </div>
    <div
      class="selector-buttons"
      style="margin-left: 82px"
      :class="{ active: 'path' === active }"
    >
      <span
        class="selector-button"
        :class="{ active: 'path' === active }"
        @click="onChangeMethod('path')"
      >
        扫掠路径
      </span>
      <button class="icon-button" @click="handleClear">
        <img src="../../assets/delete.svg" alt="" class="icon imgStyle" />
      </button>
    </div>
    <div class="title">
      <div class="title_color"></div>
      <div class="title_content">参数</div>
    </div>
    <div class="parameter_number">
      <div class="longNumber">份数：</div>
      <div class="parameter_numberinput">
        <NumberInput v-model:value="parameter.segment"></NumberInput>
      </div>
    </div>
    <div class="parameter_number">
      <div class="longNumber"></div>
      <Checkbox>切向</Checkbox>
    </div>
    <div class="title mt-20">
      <div class="title_color"></div>
      <div class="title_content">创建到：</div>
    </div>
    <div class="createTo-box">
      <Select
        :options="selectList"
        v-model:value="toComp"
        style="width: 120px"
      ></Select>
      <span class="createTo-text" v-if="toComp === 0">unspecified</span>
    </div>
    <div class="foot-box">
      <Button type="primary" @click="confirm">创建</Button>
      <Button type="default" @click="closeBtn">取消</Button>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  RadioGroup,
  Radio,
  NumberInput,
  Checkbox,
  Select,
  Toast,
  Notice,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { ref, reactive } from "vue";
import { useRightMeshEditStore } from "@/UI/store/rightMeshEditStore";
import { _global, useCoreStore } from "@/UI/store";
import { STATUS_CODE, VIEW_MODE } from "@/FrontProcessing";
const rightMeshEditStore = useRightMeshEditStore();
const coreStore = useCoreStore();

const methodList = [
  { content: "拉伸二维单元", label: "2DElems" },
  { content: "拉伸三维单元面", label: "FacesFrom3DElems" },
];
const selectList = [
  {
    label: "当前组件",
    value: 0,
  },
  {
    label: "新建组件",
    value: 1,
  },
  {
    label: "选择组件",
    value: 2,
    disabled: true,
  },
];
const toComp = ref(0);
const active = ref("2DElems");

const parameter = reactive({
  method: "2DElems",
  segment: 5, // 份数
});

const { scanning3D } = storeToRefs(rightMeshEditStore);

function openShade() {
  _global.Engine.view.modeChang(VIEW_MODE.WIREFRAME);
  _global.Engine.state.set("ViewMode", VIEW_MODE.WIREFRAME);
  coreStore.setSurfaceMode(false);
  coreStore.setLineMode(true);
}

function closeShade() {
  _global.Engine.view.modeChang(VIEW_MODE.SURFACE);
  _global.Engine.state.set("ViewMode", VIEW_MODE.SURFACE);
  coreStore.setSurfaceMode(true);
  coreStore.setLineMode(false);
}

function onChangeMethod(val: string) {
  active.value = val;
  if (val === "2DElems") {
    openShade();
  } else if (val === "FacesFrom3DElems") {
  } else if (val === "path") {
    closeShade();
    _global.Engine.state.set("Mode", STATUS_CODE.EDGE);
  }
}

function confirm() {
  // rightMeshEditStore.setFormScanningModelValue({...parameter});
  // scanning3D.value = false;
  Toast.loading({ content: "扫掠中", duration: 0 });
  _global.Engine.mesh
    .sweep3d({ setName: parameter.method, segment: parameter.segment })
    .then((res) => {
      console.log(" sweep 3d res: ", res);
    })
    .catch((err) => {
      Notice.error(`需要先选中单元面和扫掠路径`);
    })
    .finally(() => {
      Toast.close();
    });
}
function closeBtn() {
  scanning3D.value = false;
}
function handleClear() {}
</script>

<style scoped>
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
:deep(.vxp-option-vars) {
  /* --vxp-option-color-disabled:  */
  --vxp-option-bg-color-disabled: var(--vxp-fill-color-disabled);
}
.createTo-box {
  padding-left: 40px;
  display: flex;
  justify-content: flex-start;

  :deep(.vxp-select__label) {
    text-align: left;
  }
  :deep(.vxp-option--disabled) {
    color: var(--vxp-content-color-disabled);
  }
  :deep(.vxp-option--disabled:hover) {
    color: var(--vxp-content-color-disabled);
  }
}
.createTo-btn {
  margin-left: 10px;
}
.createTo-text {
  margin-left: 10px;

  height: 30px;
  line-height: 30px;
}
.createTo-select {
  width: 40%;
}
.parameter_number {
  padding: 0 25px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
}
.parameter_numberinput {
  width: 40%;
}
.longNumber {
  width: 15%;
  text-align: right;
}
.chose-box {
  padding-left: 8%;
  margin-bottom: 10px;
}
.radio_item {
  display: inline-block;
  width: 120px;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  display: inline-block;
  height: 22px;
  width: 160px;
  padding: 0 16px;
  border: 1px solid #ccc;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  height: 22px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #ccc;
  border-left: none;
  cursor: pointer;
  background-color: #fff;
}
.icon-button:hover {
  background-color: var(--vxp-color-warning-opacity-7);
}
.imgStyle {
  height: 100%;
}
.radio_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.chose_radiogroup {
  margin-bottom: 10px;
  margin-left: 12%;
}
.chose_radiogroup :deep(.vxp-radio-vars) {
  --vxp-radio-series-span: 30px;
}
.direction_box {
  margin-bottom: 16px;
  padding: 0 40px;
}
.direction_name {
  text-align: center;
  height: 22px;
  line-height: 22px;
  border-radius: 5px;
}
.direction_foot {
  margin-top: 6px;
  display: flex;
}
.direction_foot :deep(.vxp-button-vars) {
  --vxp-button-min-width: 48px;
}
</style>
